<template>
  <div class="menu_box">
    <el-menu
      router
      class="menu"
      background-color="#545c64"
    >
      <el-menu-item v-for="(item,i) in menuList" :key="i" :class="activePath==item.path?'active':''" :index="item.path">
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import { getCurrentInstance, ref, reactive, defineComponent, watch } from "vue";

import { useRoute } from "vue-router";

import { useStore } from "vuex"

export default defineComponent({
  setup() {
    const activePath = ref("/");
    const menuList = reactive([
      { name: "Home", path: "/" },
      { name: "watch", path: "/watcher" },
      { name: "About", path: "/about" },
      { name: "pro_inj", path: "/provide_inject" },
      { name: "DemoList", path: "/demo_list" },
      { name: "DemoListClass", path: "/demo_list_class" },
      { name: "firstPage", path: "/first-page" },
      {name:"wordModel",path:"/word-model"}
    ]);

    const route = useRoute();
    const store = useStore();
    const state = store.state;
    watch(
      () => route.path,
      (path) => {
        activePath.value = path;
        store.commit("setCurPath",path)
      }
    );
    watch(()=>store.state.pathChange,()=>{
        console.log(store.state.curPath,7777)
       activePath.value = store.state.curPath;
    })
    return {
      //必须返回 模板中才能使用
      activePath,
      menuList
    };
  }
});
</script>
<style lang="less">
.menu li{
    color:#fff;
}

.menu .el-menu-item.is-active{
    color:#fff;
}
.menu .active span{
    color:#ffd04b;
}
</style>
